<div class ="articulo_galeria" onMouseOver="$('#flotanteGaleria').stop(true, true).show('slow');" onMouseOut="$('#flotanteGaleria').delay('500').hide('fast');">

    <h4 id="tituloImagen1" style="width:370px;font-family: Arial;"><?=$articulo->gallery[0]->title?></h4>
    <span class="counterGaleria"><span id="galContador">1</span>/<?=count($articulo->gallery)?></span>
    
    <img src="media/k2/galleries/<?=$articulo->gallery?>/<?=$articulo->gallery[0]->path?>" class="imgGal" id="imgPrincipalGaleria"/>
    
    <div class="navGal" id="navGal">
        <a href="#" class="notaGaleriaIzq" id="prevVideo"><img src="images/notaGaleriaIzq.png" /></a>
        <a href="#" class="notaGaleriaDer" id="nextVideo"><img src="images/notaGaleriaDer.png"/></a>
        
        <div class="carrusel">
            <ul>
            <? $i = 1;?>
            <?php foreach($articulo as $g):?>
            	
                <li img="<?=$g->path?>" imgNum="<?=$i?>" onClick="cargarImgLi($(this));" titulo="<?=$g->title?>">
                	
                	<img src="./imagen/48x48/?i=media/k2/galleries/<?=$articulo->gallery?>/<?=$g->path?>" width="46" height="46" 
                	onMouseOver="$(this).css('border-color', '#FFF');" onMouseOut="$(this).css('border-color', '#606060');" style="cursor: pointer;"/>
                </li>

                <? $i++?>
            <? endforeach;?>
            </ul>
        </div>
    </div>
    
    <? /* DIV OCULTO*/?>
    <div class="flotanteGaleria" style="display: none;" id="flotanteGaleria">
        <div class="pluginSocial">
            <a href="#" onclick="$('#flotanteGaleria').hide(); return false;"><img src="images/btnGalClose.png" /></a>
        </div>
        <h5 id="tituloImagen2"><?=$articulo->gallery[0]->title?></h5>
        <center>
        	<?= (isset($item_publicidadgaleria->adsense)) ? $item_publicidadgaleria->adsense : ""; ?>
        </center>
    </div>
    
    
    <div style="clear:both;"></div>
</div>

<script type="text/javascript">
function cargarImgLi(li) {
	
	$('#galContador').text($(li).attr('imgNum')); 
	$('#tituloImagen1').text($(li).attr('titulo'));
	$('#tituloImagen2').text($(li).attr('titulo'));
	$('#imgPrincipalGaleria').attr('src', './media/k2/galleries/<?=$articulo->gallery?>/'+$(li).attr('img'));
}

$(document).ready(function() {
    /*$("#navGal li").click(function() {
    });*/
$("#navGal .carrusel").jCarouselLite({
        visible: <?=$total;?>,
        btnNext: "#nextVideo",
        btnPrev: "#prevVideo"
    });
});
</script>